:root {
  --bg-microsoft-opacity: 0.1;
}

$fg-microsoft-opacity: 62%;
.bg-microsoft-red { background-color: rgba(242, 80, 34, var(--bg-microsoft-opacity)) !important; }
.bg-microsoft-green { background-color: rgba(127, 186, 0, var(--bg-microsoft-opacity)) !important; }
.bg-microsoft-blue { background-color: rgba(0, 164, 239, var(--bg-microsoft-opacity)) !important; }
.bg-microsoft-yellow { background-color: rgba(255, 185, 0, var(--bg-microsoft-opacity)) !important; }
.fg-microsoft-red { color: mix(#f25022, $text-color, $fg-microsoft-opacity) !important; }
.fg-microsoft-green { color: mix(#7fba00, $text-color, $fg-microsoft-opacity) !important; }
.fg-microsoft-blue { color: mix(#00a4ef, $text-color, $fg-microsoft-opacity) !important; }
.fg-microsoft-yellow { color: mix(#ffb900, $text-color, $fg-microsoft-opacity) !important; }

// These are recognized CSS color names
$colors: aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown,
  burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan,
  darkgoldenrod, darkgray, darkgrey, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred,
  darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink,
  deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold,
  goldenrod, gray, grey, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush,
  lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgrey, lightgreen,
  lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime,
  limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen,
  mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin,
  navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise,
  palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown,
  salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen,
  steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen;

@each $color in $colors {
  .text-#{$color} {
    color: $color !important;
  }
}
